<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="{{asset('map/css/main.css')}}">
    <title>{{$cate->name}}</title>
    <style>
        html, body, #container {
            height: 100%;
            width: 100%;
        }

        .content-window-card {
            position: relative;
            box-shadow: none;
            bottom: 0;
            left: 0;
            width: auto;
            padding: 0;
        }

        .content-window-card p {
            height: 2rem;
        }

        .custom-info {
            border:none;
            /*border: solid 1px #f5f5f5;*/
        }

        div.info-top {
            position: relative;
            background: none repeat scroll 0 0 #fff;
            border-radius: 5px 5px 0 0;
        }

        div.info-top div {
            display: inline-block;
            color: #333333;
            font-size: 14px;
            font-weight: bold;
            line-height: 31px;
            padding: 0 10px;
        }

        div.info-top img {
            position: absolute;
            top: 10px;
            right: 10px;
            transition-duration: 0.25s;
        }

        div.info-top img:hover {
            box-shadow: 0px 0px 5px #000;
        }

        div.info-middle {
            font-size: 12px;
            padding: 10px 6px;
            margin-top:-5px;
            line-height: 20px;
        }

        div.info-bottom {
            height: 0px;
            width: 100%;
            clear: both;
            text-align: center;
        }

        div.info-bottom img {
            position: relative;
            z-index: 104;
        }

        span {
            margin-left: 5px;
            font-size: 11px;
        }

        .info-middle img {
            float: left;
            margin-right: 6px;
        }
    </style>
</head>
<body>
<!--地图-->
<div class="map-box" id="mapBox"></div>
<!--按钮-->
<div class="rt-box">
    <img src="{{$cate->thumb}}"  class="wechat-pic">
<!--<button type="button" class="map-btn wechat-btn"></button>
<button type="button" class="map-btn btn-vip qun-code">长按关注</button>-->
</div>
<a href="{{url('traffic?category_id='.$cate->id)}}" class="traffic-btn">路况一览</a>
<button type="button" class="qun-btn kefu-code">路况群</button>
<!--弹框微信二维码-->
<div class="modal-pic modal-wechat">
    <img src="{{$cate->thumb}}" alt="" class="code-pic">
</div>
<!--/.弹框微信二维码-->

<!--弹框群-->
<div class="modal-pic modal-qun">
    <img src="{{$cate->thumb}}" alt="" class="code-pic">
</div>
<!-- /.弹框群-->

<!--弹框客服二维码-->
<div class="modal-pic modal-kefu">
    <img src="{{$cate->kefu_pic}}" alt="" class="code-pic">
</div>
<!-- /.弹框客服二维码-->

<!--提示弹框-->
<div class="modal-tip">
    <p style="margin:20px 0 30px 0;text-align:center;font-size: 18px;font-weight: 700;">设置浮窗，实时路况尽在掌握</p>
    <p class="step-list">1.点击右上角 <img src="{{asset('map/images/share.jpg')}}" alt=""></p>
    <p class="step-list">1.选择左下角<img src="{{asset('map/images/fuchuang.jpg')}}" alt=""></p>
    <label class="checkbox-tip"><input type="checkbox" class="ifremind">不再提醒</label>
    <button type="button" class="know-btn">我知道了</button>
</div>
<!-- /.提示弹框-->
<!--弹框遮罩层-->
<div class="modal-back"></div>
<div class="modal-back-tip"></div>

<!--jquery-->
<script src="{{asset('map/js/jquery-2.2.3.min.js')}}"></script>
<!--高德地图-->
<script src="https://webapi.amap.com/maps?v=1.4.14&key=c1ecb302cec2991b72ffd92c3ed40536"></script>
<!-- UI组件库 1.0 -->
<script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

<script>
    // 设置map盒子高度 监听屏幕变化实时更改高度
    $(window).bind('load resize', function () {
        var mapHeight = $(window).height();
        //设置map盒子高度
        $('.map-box').height(mapHeight)
    });

    $(document).ready(function () {
        
        //提示层 提示设置浮窗
        $('.know-btn').on('click', function () {
            $('.modal-back-tip').fadeOut();
            $('.modal-tip').fadeOut();
        })

        //不再提醒
        //checkbox值改变时存储localStorage的remind值
        $(".ifremind").on("change", function () {
            if ($('.ifremind').is(':checked')) {
                localStorage.remind = 1;
            } else {
                localStorage.remind = 0;
            }
        });
        var local_remind = localStorage.remind;//获取本地localStorage的remind值
        //根据本地localStorage的remind值判断是否显示提示层
        if (local_remind == 1) {
            $('.modal-back-tip').hide();
            $('.modal-tip').hide();
        } else {
            $('.modal-back-tip').show();
            $('.modal-tip').show();
        }
        //console.log(local_remind)

        //点击弹出微信二维码
        $('.wechat-btn').on('click', function () {
            $('.modal-back').fadeIn();
            $('.modal-wechat').fadeIn();
        })

        //点击弹出群二维码
        $(document).on('click','.qun-code', function () {
            $('.modal-back').fadeIn();
            $('.modal-qun').fadeIn();
        })

        //点击弹出客服二维码
        $(document).on('click','.kefu-code', function () {
            $('.modal-back').fadeIn();
            $('.modal-kefu').fadeIn();
        })

        //点击弹框黑色背景隐藏弹框
        $('.modal-back').on('click', function () {
            $(".modal-back").fadeOut();
            $(".modal-pic").fadeOut();
        })
    });

    //地图
    var map = new AMap.Map('mapBox', {
        zoom: 10,//级别
        //center: [121.467756,31.221631],//中心点坐标
    });

    //加载点
    var data = createPoints(map.getCenter(), 20);

    //缩放控件
    AMapUI.loadUI(['control/BasicControl'], function (BasicControl) {

        var zoomCtrl = new BasicControl.Zoom({
            position: 'bl',
            
        })
        map.addControl(zoomCtrl);
    });

    AMapUI.load(['ui/misc/PointSimplifier', 'lib/utils', 'lib/$'], function(PointSimplifier, utils, $) {

        
        /**
         * 自定义的分组绘制引擎，仅作示例,功能类似于 PointSimplifier.Render.Canvas.GroupStyleRender
         * @param {PointSimplifier} pointSimplifierIns 关联的PointSimplifier实例
         * @param {Object} opts   配置
         */
        function MyCanvasRender(pointSimplifierIns, opts) {
            //直接调用父类的构造函数
            MyCanvasRender.__super__.constructor.apply(this, arguments);
        }

        //继承自默认的Canvas引擎（https://webapi.amap.com/ui/1.0/ui/misc/PointSimplifier/render/canvas.js）
        utils.inherit(MyCanvasRender, PointSimplifier.Render.Canvas);

        utils.extend(MyCanvasRender.prototype, {
            /**
             * 重新实现点的绘制方法
             * @param  {number} zoom       当前的地图级别
             * @param  {Array} activePoints 可以正常绘制的点
             * @param  {Array} shadowPoints 空间被占用的点
             */
            renderNormalPoints: function(zoom, activePoints, shadowPoints) {
                //先按默认逻辑处理shadowPoints
                MyCanvasRender.__super__.renderNormalPoints.call(this, zoom, null, shadowPoints);

                var pointStyle = this.getOption('pointStyle'),
                    getPointsGroupKey = this.getOption('getPointsGroupKey'),
                    pointStyleGroup = this.getOption('pointStyleGroup'),
                    pointSimplifierIns = this.getPointSimplifierInstance(),
                    groups = {};

                //按key分组
                for (var i = 0, len = activePoints.length; i < len; i++) {

                    var point = activePoints[i],
                        dataIndex = point.idx,
                        dataItem = pointSimplifierIns.getDataItemByIndex(dataIndex);

                    var key = getPointsGroupKey.call(this, dataItem, dataIndex);

                    if (!groups[key]) {
                        groups[key] = [];
                    }

                    groups[key].push(activePoints[i]);
                }

                //分组绘制
                for (var k in groups) {

                    //继承pointStyle中的默认属性
                    var styleOptions = utils.extend({}, pointStyle, pointStyleGroup[k]);

                    //调用父类的绘制函数
                    this.drawPointsWithStyleOptions(groups[k], styleOptions);
                }
            }
        });


        var pointSimplifierIns = new PointSimplifier({

            zIndex: 300,
            map: map,
            getPosition: function(dataItem) {
                //返回数据项的经纬度，AMap.LngLat实例或者经纬度数组
                return dataItem.position;
            },
            getHoverTitle: function(dataItem, idx) {
                //return '序号: ' + idx;
            },
            //赋值为 MyCanvasRender
            renderConstructor: MyCanvasRender,
            renderOptions: {
                getPointsGroupKey: function(dataItem, dataIndex) {
                    //这里直接按索引取余，仅作示意
                    
                    return dataItem.status;
                },
                //分组配置
                pointStyleGroup: {
                    'g0': {
                        fillStyle: 'black'
                    },
                    'g1': {
                        fillStyle: 'red'
                    },
                    
                    
                }
            },
            autoSetFitView:true
        });

        function startAnim() {
            var renderOptions = pointSimplifierIns.getRenderOptions();
            console.info(renderOptions);
            //获得pointStyle
            var pointStyle = renderOptions.pointStyle;
           
            var size = pointStyle.width,
                range = [5, 16],
                step = size < range[1] ? 1 : -1;

            //pointSimplifierIns.getRender().getLayer().set('alwaysRender', true);

            function anim() {
                size += step;
                //修改pointStyle
                pointStyle.width = pointStyle.height = size;

                //重新绘制
                pointSimplifierIns.render();
                if (size >= range[1]) {
                    step = -1;
                } else if (size <= range[0]) {
                    step = 1;
                }
                setTimeout(anim, 60);
            }
            anim();
        }


      

      

        //设置数据源，data需要是一个数组
        pointSimplifierIns.setData(data);

        pointSimplifierIns.on('pointClick', function(e, record) {
                if(e.type === 'pointClick'){ 
                    var info = [];
                    
                    info.push(record.data.msg);            
                    
                    var lnglat = record.data.position;
                    infoWindow = new AMap.InfoWindow({
                        position: lnglat,
                        offset: new AMap.Pixel(0, 0),
                        content: info.join("<br/>")  
                    });
                    infoWindow.open(map);
                }
            });

           

         startAnim();
         map.setZoom(10);
         
    });



    function createPoints(center, num) {
        var data = [];
        @foreach($points as $p)
            var work_time = '';
            @if($p->is_new)
            work_time = '{{$p->work_time}}';
            @endif
            data.push({
                position: '{{$p->lnglat}}'.split(','),
                status:'{{$p->point_style}}',
                msg:'<div class="infoWindow"><button type="button" class="btn btn-{{$p->btn_style}}  btn-xs kefu-code"> {{$p->txt}} </button> <span> {{$p->pass_time}} -  {{$p->title}} </span></div>'
                
                })
           
        @endforeach
        return data;
    }
    </script>
</body>

</html>